<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/header :: header}">
    <title>快速添加店铺</title>
</head>
<body>
<input type="hidden" id="roleId"/>
<form class="layui-form" action="" lay-filter="order" >
    <!--<span style="font-size:16px;font-weight:500;margin-left:3px;">批量添加店铺：</span>-->

    <table id="store" class="layui-hide" lay-filter="store"></table>
</form>
<!--用于序号列 递增，（但表头type: 'numbers'也可以）-->
<script type="text/html" id="num">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container" >
        <button type="button" class="layui-btn layui-btn-sm" lay-event="refresh">
            <i class="layui-icon">&#xe9aa;</i>
        </button>
        <a class="layui-btn layui-btn-sm " lay-event="add">添加勾选权限</a>

    </div>
</script>
<script src="/static/layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script src="/static/jquery/jquery-3.2.1.min.js" th:src="@{/jquery/jquery-3.2.1.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    /*<![CDATA[*/

    layui.use(['table','form','layer'], function () {
        let table = layui.table,
            layer = layui.layer;
        //第一个实例
        let tableInit = table.render({
            elem: '#store'
            , height: 'full-30' //高度最大化减去差值
            , url: '/admin/getNoPermission' //数据接口
            , where: {
                "roleId":$("#roleId").val()
            }
            , toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器 并开启自带工具
            , contentType: 'application/x-www-form-urlencoded'
            , response : {
                /*
                    默认规定的数据格式为
                    {
                      "code": 0,
                      "msg": "",
                      "count": 1000,
                      "data": [{}, {}]
                    }
                    现在借助response 重新规定返回的数据格式
                */
                statusName : 'code'
                , statusCode : 1
            },
            done: function (res, curr, count) { /* 表格自适应 */
                $("table").css("width", "100%");
            }
            , parseData: function(res){ //res 即为原始返回的数据

                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
            , cols: [[ //表头
                {type: 'checkbox'}
                , {title: '序号',type: 'numbers', width: 80, sort: true}
                , {field: 'permissionName', title: '权限名称',width:180}
                , {field: 'description', title: '权限描述',width:180}
                , {field: 'code', title: '权限代码',width:180}
                , {field: 'url', title: '权限地址',width:180}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(store)', function(obj){
            let checkStatus  = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    let data = checkStatus.data;
                    if(data.length === 0){
                        layer.msg('请选择权限',{
                            icon: 2
                        });
                    } else {
                        let load = layer.load(0, {shade: false});
                        let ids = [];
                        for (const datum of data) {
                            ids.push(datum.id);
                        }

                        $.ajax({
                        type:"POST",
                        url:"/admin/edit",
                        contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                        data: {roleId: $("#roleId").val(),ids: ids.toString()},
                        success:function (result) {
                            layer.close(load);
                            if(result.code === 1){
                                layer.msg("导入成功");
                                tableInit.reload();
                            }else{
                                layer.msg("导入失败",{icon:2,time:1200})
                            }
                        },error:function (e) {
                            layer.msg("网络错误",{icon:2})
                        }
                    });
                    }
                    break;
                case 'refresh':
                    tableInit.reload();
                    break;
            }
        });
    });

    /*]]>*/
</script>
</body>
</html>
